<template>
  <div class="login-container">
    <div class="login">
      <div class="login__title">GT后台管理系统</div>
      <el-form
        :model="data"
        :rules="rules"
        ref="form"
        label-width="0px"
        class="login__content"
      >
        <el-form-item prop="mobile">
          <el-input v-model="data.mobile" placeholder="用户名">
            <template #prepend>
              <el-icon>
                <User />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" placeholder="密码" v-model="data.password">
            <template #prepend>
              <el-icon>
                <Lock />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="verifyCode">
          <el-input
            v-model="data.verifyCode"
            @keyup.enter="submitForm"
            placeholder="验证码"
            style="width: 55%; margin-right: 10px"
          >
            <template #prepend>
              <el-icon>
                <Key />
              </el-icon>
            </template>
          </el-input>
          <img :src="codeImage" alt="验证码" @click="getCodeImage" />
        </el-form-item>
        <div class="login__content__submit">
          <el-button type="primary" @click="submitForm">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { getCaptcha, login } from "@/api/login";
import { getCurrentUser } from "@/api/user";
import { ElMessage } from "element-plus/es";
import db from "@/utils/db";

const data = reactive({
  mobile: "",
  password: "",
  verifyCode: "",
  key: "",
});

const rules = {
  mobile: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  verifyCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
};
const form = ref(null);
const codeImage = ref("");

// 提交表单
const submitForm = () => {
  const store = useStore();
  const router = useRouter();

  form.value.validate(async (valid) => {
    if (valid) {
      const result = await login(data);
      db.set("token", result.data.token);

      const res = await getCurrentUser();
      const userInfo = {
        username: res.data.username,
        role: res.data.roleName,
        avatar: res.data.avatar,
      };
      await store.dispatch("user/setUserInfo", userInfo);

      ElMessage.success("登录成功");
      await router.push("/");
    }
  });
};

// 获取验证码
const getCodeImage = () => {
  getCaptcha().then((res) => {
    codeImage.value = res.data.img;
    data.key = res.data.key;
  });
};

getCodeImage();
</script>

<style lang="scss" scoped>
@import "@/style/viriables";

.login-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(img/login-bg.jpg);
  background-size: 100%;
}

.login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: $medium-fontColor;
  overflow: hidden;

  &__title {
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: $bgColor;
    border-bottom: 1px solid $light-fontColor;
  }

  &__content {
    padding: 30px 30px;

    &__submit {
      text-align: center;

      & button {
        width: 100%;
        height: 36px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
